<template>
  <div class="app-container">

    <el-calendar ref="calendarRef">
      <template slot="dateCell" slot-scope="{date, data}">
        <div style="background-color: #FDE2E2;height: 100%;width: 100%" @click="handleCalendarDate(date,data)">
          <div :class="data.isSelected ? 'is-selected' : ''">
            {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
          </div>
          <div class="arrangeWork" v-if="data.type == 'current-month' && stockRiseFallNumList.length > 0">
            <div v-for="(item, index) in stockRiseFallNumList" :key="'1' + index">
              <div v-if="data.day === item.tradeDate">
                <span style="color: red">涨{{ item.riseNum }}</span> <span style="color: green">跌{{ item.fallNum }}</span><br>
                <span style="color: red">{{ item.riseStopNum }}</span> : <span style="color: green">{{ item.fallStopNum }}</span>
              </div>
            </div>
          </div>
        </div>

      </template>
    </el-calendar>

  </div>
</template>

<script>
import { listStockRiseCalendar } from '../../../api/eye/stockRiseFallNum'
import dayjs from 'dayjs'

export default {
  name: 'StockCalendar',
  data() {
    return {
      monthDate: '',
      // 股票涨跌数表格数据
      stockRiseFallNumList: [],
      // 遮罩层
      loading: true
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 点击上个月
      let prevBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(1)')
      prevBtn.addEventListener('click', () => {
        console.log('上个月')
        let startDate = this.$refs.calendarRef.selectedDay
        console.log(startDate)
        listStockRiseCalendar({ startDate: startDate }).then(response => {
          this.stockRiseFallNumList = response.data
        })
      })
      // 点击今天
      let currBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)')
      currBtn.addEventListener('click', () => {
        console.log('今天')
        let startDate = dayjs().startOf('month').format('YYYY-MM-DD')
        console.log(startDate)
        listStockRiseCalendar({ startDate: startDate }).then(response => {
          this.stockRiseFallNumList = response.data
        })
      })
      // 点击下个月
      let nextBtn = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(3)')
      nextBtn.addEventListener('click', () => {
        console.log('下个月')
        let startDate = this.$refs.calendarRef.selectedDay
        console.log(startDate)
        listStockRiseCalendar({ startDate: startDate }).then(response => {
          this.stockRiseFallNumList = response.data
        })
      })
    })
  },
  created() {
    this.getList()
  },
  methods: {
    handleCalendarDate(date, data) {

      let startDate

      console.log('选中:' + data.day)
      if ('prev-month' === data.type) {
        console.log('上月')
        startDate = this.$refs.calendarRef.prevMonthDatePrefix + '-01'
        console.log(startDate)
        listStockRiseCalendar({ startDate: startDate }).then(response => {
          this.stockRiseFallNumList = response.data
        })
      }

      if ('next-month' === data.type) {
        console.log('下月')
        startDate = this.$refs.calendarRef.nextMonthDatePrefix + '-01'
        console.log(startDate)
        listStockRiseCalendar({ startDate: startDate }).then(response => {
          this.stockRiseFallNumList = response.data
        })
      }
    },
    /** 查询股票分组列表 */
    getList() {
      listStockRiseCalendar({ startDate: dayjs().startOf('month').format('YYYY-MM-DD') }).then(response => {
        this.stockRiseFallNumList = response.data
        console.log(this.stockRiseFallNumList)
      })
    }
  }
}
</script>
